<template>
  <div class="setting-content">
    <span></span>
    <span>
      <setting-outlined v-if="isCustomColumnProp" @click="changeModalVisibility(true)" />
    </span>
  </div>
  <div class="table-column-check-all">
    <a-modal
      ok-text="确定"
      cancel-text="取消"
      :visible="showModel"
      :width="800"
      title="自定义列设置"
      wrap-class-name="table-column-check-all-modal"
      @cancel="changeModalVisibility(false)"
      @ok="handleSubmitConditions"
    >
      <div class="check-all">
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 全选 </a-checkbox>
      </div>
      <a-checkbox-group v-model:value="checkedList" :options="columnPlainOptions" @change="onChange" />
    </a-modal>
  </div>
</template>
<script>
  import { isEmptyArr } from '@/utils/is'
  import { computed, defineComponent, ref } from 'vue'
  export default defineComponent({
    name: 'CustomTableColumn',
    props: {
      //自定义列
      isCustomColumn: {
        type: Boolean
      },
      //复选框
      openCheckBox: {
        type: Boolean
      },
      //列数据
      plainOptions: {
        type: Array
      },
      // 表格列数据
      tableColumns: {
        type: Array
      }
    },
    emits: ['filter'],
    setup(props, { emit }) {
      const isCustomColumnProp = computed(() => {
        return props.isCustomColumn
      })
      const indeterminate = ref(false)
      const checkedList = ref([])
      const showModel = ref(false)
      const checkAll = ref(false)
      const changeModalVisibility = (visible = false) => {
        resetCheckedList()
        showModel.value = visible
      }
      const columnPlainOptions = computed(() => {
        const options = []
        const noColumn = ['sequenceNumber', 'operation', 'qrcode']
        props.plainOptions.map(item => {
          if (!noColumn.includes(item.dataIndex)) {
            options.push(...getChildList(item))
          }
        })
        return options
      })
      // 当前表格回显的列
      const tableColumns = computed(() => {
        const options = []
        const noColumn = ['sequenceNumber', 'operation', 'qrcode']
        props.tableColumns.map(item => {
          if (!noColumn.includes(item.dataIndex)) {
            options.push(...getChildList(item))
          }
        })
        return options
      })
      const getChildList = item => {
        const options = []
        if (item.children && item.children.length > 0) {
          //有子级显示子级
          options.push(
            ...item.children.map(info => {
              return {
                label: info.title,
                value: info.dataIndex
              }
            })
          )
        } else {
          //无子级显示自己
          options.push({ label: item.title, value: item.dataIndex })
        }
        return options
      }
      const onCheckAllChange = event => {
        const { checked } = event.target
        checkedList.value = checked ? columnPlainOptions.value.map(option => option.value) : []
        indeterminate.value = false
        checkAll.value = checked
      }
      const handleSubmitConditions = () => {
        const checkColumnList = columnPlainOptions.value
          .filter(item => checkedList.value.includes(item.value))
          .map(item => ({
            key: item.value,
            name: item.value,
            description: item.label
          }))
        emit('filter', checkColumnList)
        showModel.value = false
      }
      const onChange = () => {
        indeterminate.value =
          !isEmptyArr(checkedList.value) && checkedList.value.length < columnPlainOptions.value.length
        checkAll.value = checkedList.value.length === columnPlainOptions.value.length
      }
      // 重置
      const resetCheckedList = () => {
        checkedList.value = tableColumns.value.map(option => option.value)
        onChange()
      }
      return {
        changeModalVisibility,
        handleSubmitConditions,
        showModel,
        indeterminate,
        columnPlainOptions,
        onChange,
        isCustomColumnProp,
        onCheckAllChange,
        checkAll,
        checkedList
      }
    }
  })
</script>
<style lang="less" scoped>
  .setting-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .table-column-check-all-modal .check-all {
    margin-bottom: 10px;
  }

  .table-column-check-all-modal .@{ant-prefix}-checkbox-group {
    display: flex;
    flex-wrap: wrap;
  }
  .table-column-check-all-modal :deep(.@{ant-prefix}-checkbox-group-item) {
    width: 20%;
    margin-right: 0;
    margin-bottom: 5px;
  }
</style>
